<template>
    <div class="rich_body"
        style="overflow:hidden">
        <el-row type="flex">
            <div :span="6"
                style="padding-right:30px">
                <div id="diy-phone">
                    <div class="diy-phone-header">
                        <i class="diy-phone-receiver"></i>
                        <div class="diy-phone-title j-pagetitle"></div>
                    </div>
                    <div class="diy-phone-contain"
                        id="j-materialPrev">
                        <dl class="materialPrePanel product_phone mgt20">
                            <dt>
                                <div class="single-summary"
                                    v-html="text"></div>
                            </dt>
                        </dl>
                    </div>
                    <i class="diy-phone-footer"></i>
                </div>
            </div>
            <div :span="18">

                <el-button :loading='$store.state.isLoading'
                    @click="save_shopinfo()"
                    type="primary"
                    size="mini"
                    style="margin-left:20px;margin-bottom: 10px;float: right;">完成</el-button>
                <el-button :loading='$store.state.isLoading'
                    @click="change_shop_input()"
                    type="primary"
                    size="mini"
                    style="margin-left: 20px;margin-bottom: 10px;float: right;">插入代码</el-button>
                <div style="clear:both"></div>
                <el-input v-show="text_type "
                    class="editor"
                    type="textarea"
                    :rows="28"
                    placeholder="请贴入代码"
                    v-model="text"></el-input>
                <editor v-show="!text_type "
                    class="editor"
                    :config="{qllink: false}"
                    v-model="text"
                    upload-url="/api/common/upload/index/"
                    fileName="file" />
            </div>
        </el-row>
    </div>
</template>
<script>
import editor from "@/components/currency/editor.vue";
export default {
  name: "rich_text",
  data() {
    return {
      text_type: false,
      text: ""
    };
  },
  components: {
    editor
  },
  props: {
    content: {
      type: String
    },
    edit_rich_form: {
      type: Object,
      default: {}
    }
  },
  created() {
    // this.text = edit_rich_form.
    // if (this.edit_rich_form.type == "price_readme") {
    //   this.text = this.edit_rich_form;
    // }
    this.text = this.edit_rich_form.content;
  },
  methods: {
    clear_text() {
      this.text = "";
    },
    save_shopinfo() {
      var params = {};
      params.id = this.edit_rich_form.id;
      params.sku_json = this.edit_rich_form.sku_json;
      switch (true) {
        case this.edit_rich_form.type == "price_readme":
          params.price_readme = this.text;
          break;
        case this.edit_rich_form.type == "book_needknow":
          params.book_needknow = this.text;
          break;
        default:
          break;
      }

      this.$api.getShops.updataShopsItem(params).then(res => {
        if (res.data.code == 200 && res.data.result) {
          this.text = "";
          this.$fnc.alertSuccess({
            text: "修改成功"
          });
          this.$emit("close_rich");
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    },
    change_shop_input() {
      this.text_type = !this.text_type;
    }
  },
  computed: {
    returnform() {
      return this.edit_rich_form.content;
    }
  },
  watch: {
    returnform(old, after) {
      this.text = this.edit_rich_form.content;
    }
  }
};
</script>
<style  scoped>
.materialPrePanel {
  max-height: 468px;
  overflow: auto;
  width: 320px;
}
.rich_body {
  width: 100%;
  height: 750px;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  padding: 10px 20px;
}
.rich_dia {
  /* overflow: hidden; */
}
.editor .ql-editor {
  height: 520px;
}
</style>
